<template>
	<view class="container">
		<view class="yylist_dl">
			<view class="yylist_dd">
				<view class="fl">就诊门店：</view>
				<view class="fr">{{row.shopname}}</view>
			</view>
			<view class="yylist_dd">
				<view class="fl">预约医生：</view>
				<view class="fr">{{row.doctor}}</view>
			</view>
			<view class="yylist_dd">
				<view class="fl">预约时间：</view>
				<view class="fr">{{row.date}} {{row.times}}</view>
			</view>
			<view class="yylist_dd">
				<view class="fl">预约项目：</view>
				<view class="fr">{{row.cate}}</view>
			</view>
			<view class="yylist_dd">
				<view class="fl">预约价格：</view>
				<view class="fr">{{row.price}}</view>
			</view>
		</view>
		<form @submit="formSubmit" @reset="formReset">
			<view class="mapform mgt20">
				<view class="mapform_dl">
					<view class="mapform_dt">取消原因<text class="red">*</text></view>
					<view class="mapform_dd">
						<picker @change="bindPickerChange1" :value="index1" :range="array1" range-key="name">
							<view class="picker">{{index1===""?"请选择取消原因":array1[index1].name}}</view>
						</picker>
						<view class="mapform_ico"></view>
					</view>
				</view>
			</view>
			<view class="mapform mgt20">
				<view class="mapform_dt">补充信息：</view>
				<textarea class="viptextarea" @input="idesc" placeholder="请输入取消预约描述，有助于门店提供更好的服务" />
			</view>
			<view class="formbottom" @click="save">
				<view class="formbtn">确定</view>
			</view>
		</form>
	</view>
</template>

<script>
	import API from "@/common/api.js";
	export default {
		data() {
			return {
				row: [],
				array1: [],
				index1: "",
				desc: ""

			}
		},
		onLoad(options) {
			var $this = this
			API.post("common/myyuyuedetail", {
				id: options.id
			}).then((res) => {
				if (res.code == 1) {
					$this.row = res.data
				}
			})
			API.post("common/qxreason").then((res) => {
				if (res.code == 1) {
					$this.array1 = res.data
				}
			})
		},
		methods: {
			save() {
				if (this.index1 === "") {
					API.showToast("请选择取消原因")
				} else {
					var json = {
						id: this.row.id,
						desc: this.desc,
						reason: this.array1[this.index1].name
					}
					API.post("common/quxiao", json).then((res) => {
						if (res.code == 1) {
							API.showModal(res.msg, "/pages/user/user")
						} else {
							API.showToast(res.msg)
						}
					})
				}
			},
			idesc(e) {
				this.desc = e.detail.value
			},
			bindPickerChange1: function(e) {
				console.log('picker发送选择改变，携带值为：' + e.detail.value)
				this.index1 = e.detail.value
			},

		}
	}
</script>

<style lang="scss">
	page {
		background: #f7f7f7;
	}

	.yylist_dl {
		width: 100%;
		padding: 30rpx;
		overflow: hidden;
		box-sizing: border-box;
		background: #fff;
	}

	.yylist_dd {
		width: 100%;
		overflow: hidden;
		line-height: 60rpx;
		font-size: 28rpx;
		color: #666;
	}

	.red {
		color: #ff0000;
	}
</style>